<template>
	<view class="main-container">
		<view class="user-info">
			<image class="avatar" :src="userInfo.avatar || '/static/head.jpg'" mode="aspectFill"></image>
			<view class="user-details">
				<text class="nickname">{{ userInfo.nickname }}</text>
				<text class="phone">{{ userInfo.phone }}</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item" @tap="goToUserInfo">
				<text class="menu-title">个人信息</text>
				<image class="arrow" src="../../static/right.png" mode="aspectFit"></image>
			</view>
			<view class="menu-item" @tap="goToMoney">
				<text class="menu-title">我的余额</text>
				<text class="balance">¥{{ formatBalance(userInfo.balance) }}</text>
				<image class="arrow" src="../../static/right.png" mode="aspectFit"></image>
			</view>
			<view class="menu-item" @tap="goToCollection">
				<text class="menu-title">我的收藏</text>
				<image class="arrow" src="../../static/right.png" mode="aspectFit"></image>
			</view>
			<view class="menu-item" @tap="goToOrder">
				<text class="menu-title">我的订单</text>
				<image class="arrow" src="../../static/right.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<button class="logout-button" @tap="logout">退出登录</button>
	</view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
	name: 'MyPage',
	setup() {
		const userInfo = ref({
			avatar: '',
			nickname: '',
			phone: '',
			balance: '0.00'
		})

		// 格式化余额显示
		const formatBalance = (balance) => {
			const num = parseFloat(balance)
			return isNaN(num) ? '0.00' : num.toFixed(2)
		}

		// 加载用户信息
		const loadUserInfo = () => {
			const storedUserInfo = uni.getStorageSync('userInfo')
			if (!storedUserInfo) return
			
			const userList = uni.getStorageSync('userList') || []
			const currentUser = userList.find(item => item.uid === JSON.parse(storedUserInfo).uid)
			if (currentUser) {
				userInfo.value = {
					...currentUser,
					balance: formatBalance(currentUser.balance)
				}
				console.log('加载的用户信息:', userInfo.value)
			}
		}

		onMounted(() => {
			loadUserInfo()
		})

		const goToUserInfo = () => {
			uni.navigateTo({
				url: '/pages/userInfo/userInfo'
			})
		}

		const goToMoney = () => {
			uni.navigateTo({
				url: '/pages/money/money'
			})
		}

		const goToCollection = () => {
			uni.navigateTo({
				url: '/pages/collection/collection'
			})
		}

		const goToOrder = () => {
			uni.navigateTo({
				url: '/pages/order/order'
			})
		}

		const logout = () => {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('uid')
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			})
		}

		return {
			userInfo,
			formatBalance,
			goToUserInfo,
			goToMoney,
			goToCollection,
			goToOrder,
			logout
		}
	},
	// 使用选项式API定义页面生命周期
	onShow() {
		// 每次页面显示时重新加载用户信息
		const userInfo = uni.getStorageSync('userInfo')
		if (!userInfo) return
		
		const userList = uni.getStorageSync('userList') || []
		const currentUser = userList.find(item => item.uid === JSON.parse(userInfo).uid)
		if (currentUser) {
			this.userInfo = {
				...currentUser,
				balance: this.formatBalance(currentUser.balance)
			}
			console.log('onShow加载的用户信息:', this.userInfo)
		}
	}
}
</script>

<style scoped>
.main-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 20rpx;
}

.user-info {
	display: flex;
	align-items: center;
	padding: 40rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-right: 30rpx;
}

.user-details {
	display: flex;
	flex-direction: column;
}

.nickname {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.phone {
	font-size: 28rpx;
	color: #666;
}

.menu-list {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 0 20rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-title {
	font-size: 32rpx;
	color: #333;
}

.balance {
	font-size: 32rpx;
	color: #fd2d3e;
	margin-right: 10rpx;
}

.arrow {
	width: 32rpx;
	height: 32rpx;
}

.logout-button {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	background-color: #fd2d3e;
	color: #fff;
	font-size: 32rpx;
	border-radius: 45rpx;
	margin-top: 60rpx;
}

.logout-button::after {
	border: none;
}
</style>